<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid, validBack) => {
        //表单验证错误时
        if (!valid) {
          this.$message.error("登录错误，请查看提示正确填写");
          console.log(validBack);
          return false;
          // 表单验证正确时
        } else {
          //登录验证请求
          // axios
          //   .post("http://localhost:8888/api/private/v1/login", this.ruleForm)
          this.$axios.post('/login',this.ruleForm)
            .then((res) => {
              console.log(res);
               const { data, meta } = res.data;
              //调用vuex中userchange方法存储登录数据至本地
              this.$store.commit('userchange',data);
              //请求成功时
              if (meta.status == 200) {
                this.$message({
                  type: "success",
                  message: "登录成功",
                });
                //跳转home页面
                this.$router.push({ path: "/home" });
                //请求失败时
              } else {
                this.$message.error(meta.msg);
              }
            });
        }
      });
    },
    //清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.login {
  width: 100%;
  height: 100%;
  /* background: url("https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E8%83%8C%E6%99%AF%E5%9B%BE&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=1311327896,2794150838&os=3052714870,2914341741&simid=1311327896,2794150838&pn=0&rn=1&di=7060663421280190465&ln=1934&fr=&fmq=1646445391104_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Finews.gtimg.com%252Fnewsapp_match%252F0%252F11695386033%252F0.jpg%26refer%3Dhttp%253A%252F%252Finews.gtimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1649037389%26t%3D3da288e0508c8f06dfebe56615250654&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDUsOCwyLDcsOQ%3D%3D"); */
}
.demo-ruleForm {
  width: 450px;
  margin: 0 auto;
  margin-top: 200px;
}
</style>
